<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Examples</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="" rel="stylesheet">
  <link rel="stylesheet" href="./animate.min.css">

  <style type="text/css">
    * {
      margin: 0px;
      padding: 0px;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      overflow-y: hidden;
    }

    footer ul {
      display: flex;
      position: fixed;
      left: 0px;
      bottom: 0px;
      width: 100%;
      height: 40px;
    }

    footer ul li {
      flex: 1;
      text-align: center;
      list-style: none;
      height: 40px;
      line-height: 40px;
      background: gray;
    }

    .bounce-enter-active {
      /* animation: myanim .5s; */
      animation: bounceInUp .5s;
    }

    .bounce-leave-active {
      /* animation: myanim .5s reverse; */
      animation: bounceOutRight .5s;
    }

    @keyframes myanim {
      0% {
        transform: translateX(100px);
        opacity: 0;
      }

      100% {
        transform: translateX(0px);
        opacity: 1;
      }
    }
  </style>

  <script type="text/javascript" src="lib/vue.js"></script>
</head>

<body>
  <div id="box">

    <keep-alive>
      <transition name="bounce" mode="out-in">
        <component :is="who" class="animated"></component>
      </transition>
    </keep-alive>

    <footer>
      <ul>
        <li><a @click="who='home'">首页</a></li>
        <li><a @click="who='list'">列表页</a></li>
        <li><a @click="who='shopcar'">购物车页面</a></li>
      </ul>
    </footer>

  </div>

  <script type="text/javascript">
    //babel-loader  ES6=>ES5
    var vm = new Vue({
      el: "#box",
      data: {
        /* 存储动态组件的名字 */
        who: 'home'
      },

      components: {
        "home": {
          template: `<div>home<input type="text"/></div>`
        },
        "list": {
          template: `<div>list</div>`
        },
        "shopcar": {
          template: `<div>shopcar</div>`
        }
      }
    })

  </script>
</body>

</html>